<template>
  <view class="uni-list">
    <view
        class="uni-list-cell"
        hover-class="uni-list-cell-hover"
        v-for="(value,key) in contentList"
        @click="_handleGoDetail(value.type)"
        :key="key">
      <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
        <view class="uni-media-list-logo" v-if='value.img'>
          <image :src="value.img"></image>
        </view>
        <view class="uni-media-list-body">
          <view class="uni-media-list-text-top">
            <view>{{value.title}}</view>
            <view class="address">{{value.address}}</view>
          </view>
          <view v-if='!value.type' class="uni-media-list-text-bottom me-ellipsis">{{value.content}}</view>
          <view class="typeList" v-if='value.type'>
            <view class="listLeft">
              <view class="listMoney" v-if='value.type == 1'>
                <view class="currmoney">￥{{value.content.currMoney}}</view>
                <view class="oldmoney">￥{{value.content.oldMoney }}</view>
                <view class="discount" v-if='value.content.discount'> / {{value.content.discount}}</view>
              </view>
              <view class="contentText" v-if='value.type != 1'>{{value.content.contentText}}</view>
              <view class="stydyTime">总课时： {{value.content.studyTime}}</view>
            </view>
            <view class="listRight" v-if='value.type != 2'>
              <payment :type='value.type'/>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import payment from './payment'

  export default {
    components: {payment},
    props: {
      contentList: Array,
    },
    data() {
      return {}
    },
    methods: {
      _handleGoDetail(type) {
        let url = !type ? 'index' : 'course';
				uni.navigateTo({
					url: `/pages/detail/${url}`
				})
      }
    }
  }
</script>

<style scoped lang=scss>
  .typeList {
    width: 100%;
    color: #c8c7cc;
    font-size: 24upx;
    margin-top: -10upx;
    display: flex;
    justify-content: space-between;

    .listLeft {
      display: flex;
      flex-direction: column;

      .listMoney {
        display: flex;
        font-size: 20upx;

        .currmoney {
          color: #ffa300;
          font-size: 48upx;
        }

        .oldmoney {
          padding: 0 10upx;
        }
      }

      .contentText {
        color: #00b7ee;
      }
    }
  }

  .uni-list {
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .uni-list-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .uni-list-cell-hover {
    background-color: #eee;
  }

  .uni-list-cell-pd {
    padding: 22upx 30upx;
  }

  .uni-list-cell-left {
    font-size: 28upx;
    padding: 0 30upx;
  }

  .uni-list-cell-db,
  .uni-list-cell-right {
    flex: 1;
  }

  .uni-list-cell::after {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 30upx;
    height: 1upx;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
  }

  .uni-list .uni-list-cell:last-child::after {
    height: 0upx;
  }

  .uni-list-cell-last.uni-list-cell::after {
    height: 0upx;
  }

  .uni-list-cell-navigate {
    font-size: 30upx;
    padding: 22upx 30upx;
    line-height: 48upx;
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    justify-content: space-between;
  }


  .uni-collapse.uni-list-cell {
    flex-direction: column;
  }

  .uni-list-cell-navigate.uni-active {
    background: #eee;
  }

  .uni-list.uni-collapse {
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
  }

  .uni-collapse .uni-list-cell {
    padding-left: 20upx;
  }

  .uni-collapse .uni-list-cell::after {
    left: 52upx;
  }

  .uni-list.uni-active {
    height: auto;
  }

  /* 图文列表 */
  .uni-media-list {
    padding: 22upx 30upx;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: row;
  }

  .uni-pull-right {
    flex-direction: row-reverse;
  }

  .uni-pull-right > .uni-media-list-logo {
    margin-right: 0upx;
    margin-left: 20upx;
  }

  .uni-media-list-logo {
    height: 128upx;
    width: 128upx;
    margin-right: 20upx;
    border-bottom: 1upx solid #c8c7cc;
    border-right: 1upx solid #c8c7cc;
  }

  .uni-media-list-logo image {
    height: 100%;
    width: 100%;
  }

  .uni-media-list-body {
    min-height: 148upx;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
  }

  .uni-media-list-text-top {
    width: 100%;
    line-height: 36upx;
    font-size: 30upx;
    margin-bottom: 35upx;
    display: flex;
    justify-content: space-between;

    .address {
      color: #00b7ee;
    }
  }

  .uni-media-list-text-bottom {
    width: 100%;
    line-height: 30upx;
    font-size: 26upx;
    color: #8f8f94;
  }

  .me-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
